<template>
  <div>
    <el-row type="flex">
      <el-col
        class="formWarp"
        :span="24"
        style="margin-left: 10px"
      >
        <h2 style="text-align:center;font-size:30px;">大 组 工 网 网 站、电 子 邮 件 系 统 信 息 备 案 表</h2>
        <div style="display: flex;justify-content: flex-end;margin-right:20px;">
          <el-button type="primary" plain @click="onSubmit" size="medium">保  存</el-button>
        </div>
        <div class="infohead">
          <p>填报单位:<input v-model="fillingOrg" class="inputVal"/></p>
          <p>填表人:<input v-model="fillingPerson" class="inputVal"/></p>
          <p>联系方式:<input v-model="fillingTel" class="inputVal"/></p>
        </div>
        <div class="tableWarp" :style="{ height: heightTable }" style="overflow-y: scroll;margin-top:10px;">
          <table border="1" class="myTable">
            <thead>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 16px;" class="bgtd">
                  一、大组工网网站
                </td>
              </tr>
              <tr>
                <td style="width: 313px;" class="bgtd">市级党委组织部网站名称</td>
                <td colspan="3">
                  <el-input v-model="netName" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">市级党委组织部网站域名/IP</td>
                <td colspan="3">
                  <el-input v-model="netIp" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">市级党委组织部网站部署情况</td>
                <td colspan="3">
                  <el-input v-model="netArrange" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">网络技术路线</td>
                <td>
                  <el-tooltip class="item" effect="dark" :content="netWay" placement="top-start">
                    <el-input v-model="netWay"  />
                  </el-tooltip>
                </td>
                <td class="bgtd">管理制度</td>
                <td style="text-align:left;">
                  <el-checkbox-group v-model="isManage" @change="isManageChange">
                    <el-checkbox label="1">有</el-checkbox>
                    <el-checkbox label="0">暂无</el-checkbox>
                  </el-checkbox-group>
                  <el-upload
                    style="margin-top: 5px"
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-preview="handlePreview"
                    :before-upload="before_upload"
                    :on-success="uploadSuccess"
                    :multiple="fileMultiple"
                    :limit="1"
                    :file-list="fileManageList"
                  >
                    <el-button type="primary" style="font-size:14px;">上传电子版</el-button>
                    <div slot="tip" class="el-upload__tip" style="font-size:14px;">
                      允许上传pdf格式,且不超过100MB
                    </div>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td class="bgtd">网站管理责任科(处)室</td>
                <td colspan="3">
                  <el-input v-model="netOrg" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">管理人员</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      姓名：<el-input
                        v-model="personName"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      单位及职务：<el-input
                        v-model="jobPost"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      办公电话：<el-input
                        v-model="telPhone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      手机号码：<el-input
                        v-model="phone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                 <td class="bgtd">分级保护通过时间</td>
                 <td colspan="3">
                    <el-date-picker
                      style="float: left;"
                      type="date"
                      v-model="protectTime" 
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd" />
                 </td>
              </tr>
              <tr>
                 <td class="bgtd">网站运维单位</td>
                 <td>
                    <el-input v-model="netOmOrg" />
                 </td>
                 <td class="bgtd">运维单位涉密资质</td>
                 <td>
                    <el-input v-model="netOmOrgSecret" />
                 </td>
              </tr>
              <tr>
                 <td class="bgtd">基础软硬件品牌型号</td>
                 <td colspan="3">
                    <p class="flexStart">
                      <span>
                        服务器:<input
                          v-model="server"
                          class="inputCss"
                        />
                      </span>
                      <span>
                        CPU:<input
                          v-model="cpu"
                         class="inputCss"
                        />
                      </span>
                      <span>
                        操作系统:<input
                          v-model="operatingSystem"
                         class="inputCss"
                        />
                      </span>
                    </p>
                    <p class="flexStart">
                      <span>
                        数据库:<input
                          v-model="database"
                         class="inputCss"
                        />
                      </span>
                      <span>
                        中间件:<input
                          v-model="middleware"
                         class="inputCss"
                        />
                      </span>
                    </p>
                 </td>
              </tr>
              <tr>
                <td class="bgtd">访问中组部网站/山东组织工作网情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="flexStart">
                      是否使用国产化计算机访问：
                      <el-checkbox-group v-model="isLoacalizationPc" @change="isLoacalizationPcChange">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>

                      </el-checkbox-group>
                    </p>
                    <p class="flexStart">
                      能否正常访问：
                      <el-checkbox-group v-model="isOk" @change="isOkChange">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                        
                      </el-checkbox-group>
                      <span>
                      ， 问题：<el-input v-model="reasonPc" style="width: 400px" />
                      </span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="bgtd">国产化情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="flexStart">
                      是否国产化：
                      <el-checkbox-group v-model="isLoacalization" @change="isLoacalizationChange">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="flexStart">
                      能否正常访问：
                      <el-checkbox-group v-model="isUsedOk" @change="isUsedOkChange">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                      <span>
                       ， 问题：<el-input v-model="reasonLoac" style="width: 400px"/>
                      </span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 16px;" class="bgtd">
                  二、电子邮件系统
                </td>
              </tr>
              <tr>
                <td class="bgtd">市级党委组织部邮件系统域名/IP</td>
                <td colspan="3">
                  <el-input v-model="emailIp" />
                </td>
              </tr>
              <tr>
                <td class="bgtd">邮件系统名称/型号</td>
                <td><el-input v-model="emailName" /></td>
                <td class="bgtd">管理制度</td>
                <td style="text-align:left;">
                  <el-checkbox-group
                    v-model="emailIsManage"
                    @change="handlEmaileManageChange"
                  >
                    <el-checkbox label="1">有</el-checkbox>
                    <el-checkbox label="0">暂无</el-checkbox>
                  </el-checkbox-group>
                  <el-upload
                    style="margin-top: 5px"
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-preview="handlePreviewEmail"
                    :on-success="uploadSuccessEmail"
                    :multiple="fileEmailMultiple"
                    :before-upload="before_uploadEmail"
                    :limit="1"
                    :file-list="fileEmailList"
                  >
                    <el-button type="primary" style="font-size:14px;">上传电子版</el-button>
                    <div slot="tip" class="el-upload__tip" style="font-size:14px;">
                      允许上传pdf格式,且不超过100MB
                    </div>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td class="bgtd">邮件管理责任处室</td>
                <td><el-input v-model="emailOrg" /></td>
                <td class="bgtd">联系人及电话</td>
                <td><el-input v-model="personPhone" /></td>
              </tr>
              <tr>
                <td class="bgtd">开设邮箱数</td>
                <td><el-input v-model="emailNum" /></td>
                <td class="bgtd">邮箱分配范围</td>
                <td>
                  <p style="display: flex; align-items: center;">
                    市级：
                    <el-checkbox-group v-model="emailCity" @change="emailCityChange">
                      <el-checkbox label="0">机构</el-checkbox>
                      <el-checkbox label="1">全员</el-checkbox>
                    </el-checkbox-group>
                  </p>
                  <p
                    style="display: flex; align-items: center; margin-top: 5px"
                  >
                    县级：
                    <el-checkbox-group v-model="emailContry" @change="emailContryChange">
                      <el-checkbox label="0">机构</el-checkbox>
                      <el-checkbox label="1">全员</el-checkbox>
                    </el-checkbox-group>
                  </p>
                </td>
              </tr>
              <tr>
                <td class="bgtd">访问中组部大组工网邮件系统/省委组织部组工网邮件系统情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="flexStart">
                      是否使用国产化计算机访问：
                      <el-checkbox-group v-model="emailLocationPc" @change="emailLocationPcChange">
                          <el-checkbox label="1">是</el-checkbox>
                          <el-checkbox label="0">否</el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="flexStart">
                      能否正常访问：
                      <el-checkbox-group v-model="emailIsOk" @change="emailIsOkChange">
                        <el-checkbox label="1">是</el-checkbox>
                        <el-checkbox label="0">否</el-checkbox>  
                      </el-checkbox-group>
                      <span>
                       ， 问题：<el-input v-model="emailReason" style="width: 400px"/>
                      </span>
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 16px;" class="bgtd">
                  三、问题建议
                </td>
              </tr>
              <tr style="height: 80px">
                <td colspan="4" style="text-align: left">
                  <el-input type="textarea" :rows="4" v-model="remark" />
                </td>
              </tr>
            </thead>
          </table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {getInfoList,getInfoUpdate,getInfoSave} from "@/api/datacentersg/personnelPut/personnelPut.js"
import store from "@/store";
import webapp from "@/config/webapp";
class Photo {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
export default {
  data() {
    return {
      fillingOrg:"",
      fillingPerson:"",
      fillingTel:"",
      netName:"",
      netIp:"",
      netArrange:"",
      netWay:"",
      isManage:[],
      netOrg:"",
      personName:"",
      jobPost:"",
      telPhone:"",
      phone:"",
      protectTime:"",
      netOmOrg:"",
      netOmOrgSecret:"",
      server:"",
      cpu:"",
      operatingSystem:"",
      database:"",
      middleware:"",
      isLoacalizationPc:[],
      isOk:[],
      reasonPc:"",
      isLoacalization:[],
      isUsedOk:[],
      reasonLoac:"",
      emailIp:"",
      emailName:"",
      emailIsManage:[],
      emailOrg:'',
      personPhone:"",
      emailNum:"",
      emailCity:[],
      emailContry:[],
      emailLocationPc:[],
      emailIsOk:[],
      emailReason:"",
      remark:"",
      heightTable: window.innerHeight - 270 + "px",
      uploadUrl:webapp.uploadUrl,
      fileMultiple:false,
      fileUrl:"",
      emailFile:"",
      fileEmailMultiple:false,
      fileManageList:[],
      fileEmailList:[],
      id:"",
    };
  },
  created(){
    this.getList();
  },
  methods: {
    getList(){
        const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           type:"1",
        }
        getInfoList(params).then((result) =>{
          if(result.result){
                this.id = result.resultdata[0].id;
                this.protectTime = result.resultdata[0].protectTime;
                this.netOmOrg = result.resultdata[0].netOmOrg;
                this.netOmOrgSecret = result.resultdata[0].netOmOrgSecret;
                this.server = result.resultdata[0].server;
                this.cpu = result.resultdata[0].cpu;
                this.operatingSystem = result.resultdata[0].operatingSystem;
                this.database = result.resultdata[0].database;
                this.middleware = result.resultdata[0].middleware;
                this.fillingOrg=result.resultdata[0].fillingOrg
                this.fillingPerson=result.resultdata[0].fillingPerson
                this.fillingTel=result.resultdata[0].fillingTel
                this.netName = result.resultdata[0].netName;
                this.netIp = result.resultdata[0].netIp;
                this.netArrange = result.resultdata[0].netArrange;
                this.netWay = result.resultdata[0].netWay;
                this.netOrg = result.resultdata[0].netOrg;
                this.personName = result.resultdata[0].personName;
                this.jobPost = result.resultdata[0].jobPost;
                this.telPhone = result.resultdata[0].telPhone;
                this.phone = result.resultdata[0].phone;
                this.reasonPc = result.resultdata[0].reasonPc;
                this.reasonLoac = result.resultdata[0].reasonLoac;
                this.emailIp = result.resultdata[0].emailIp;
                this.emailName = result.resultdata[0].emailName;
                this.emailOrg = result.resultdata[0].emailOrg;
                this.personPhone = result.resultdata[0].personPhone;
                this.emailNum = result.resultdata[0].emailNum;
                this.emailReason = result.resultdata[0].emailReason;
                this.remark = result.resultdata[0].remark;
                this.fileUrl = result.resultdata[0].fileUrl;
                this.emailFile = result.resultdata[0].emailFile;
                const photoList = [];
                if (result.resultdata[0].fileUrl) {
                    photoList.push(new Photo("管理制度网站附件", result.resultdata[0].fileUrl));
                } else {
                    this.fileManageList = [];
                }
                this.fileManageList = photoList;

                const photoListEmail = [];
                if (result.resultdata[0].emailFile) {
                    photoListEmail.push(new Photo("管理制度邮件附件", result.resultdata[0].emailFile));
                } else {
                    this.fileEmailList = [];
                }
                this.fileEmailList = photoListEmail;
                this.isManage = [];
                this.isManage.push(String(result.resultdata[0].isManage));
                this.isLoacalizationPc = [];
                this.isLoacalizationPc.push(String(result.resultdata[0].isLoacalizationPc));
                this.isOk = [];
                this.isOk.push(String(result.resultdata[0].isOk));
                this.isLoacalization = [];
                this.isLoacalization.push(String(result.resultdata[0].isLoacalization));
                this.emailIsManage = [];
                this.emailIsManage.push(String(result.resultdata[0].emailIsManage));
                this.isUsedOk = [];
                this.isUsedOk.push(String(result.resultdata[0].isUsedOk));
                this.emailCity = [];
                this.emailCity.push(String(result.resultdata[0].emailCity));
                this.emailContry=[];
                this.emailContry.push(String(result.resultdata[0].emailContry));
                this.emailLocationPc = [];
                this.emailLocationPc.push(String(result.resultdata[0].emailLocationPc));
                this.emailIsOk = [];
                this.emailIsOk.push(String(result.resultdata[0].emailIsOk));
          }
        })
    },
    onSubmit(){
      if(this.id == ""){
        const params = {
                userId:store.getters.user_id.toString(),
                token:store.getters.token.toString(),
                data:{
                    fillingOrg:this.fillingOrg,
                    fillingPerson:this.fillingPerson,
                    fillingTel:this.fillingTel,
                    netName:this.netName,
                    netIp:this.netIp,
                    netArrange:this.netArrange,
                    netWay:this.netWay,
                    isManage:this.isManage[0],
                    netOrg:this.netOrg,
                    personName:this.personName,
                    jobPost:this.jobPost,
                    telPhone:this.telPhone,
                    phone:this.phone,
                    isLoacalizationPc:this.isLoacalizationPc[0],
                    isOk:this.isOk[0],
                    reasonPc:this.reasonPc,
                    isLoacalization:this.isLoacalization[0],
                    isUsedOk:this.isUsedOk[0],
                    reasonLoac:this.reasonLoac,
                    emailIp:this.emailIp,
                    emailName:this.emailName,
                    emailIsManage:this.emailIsManage[0],
                    emailOrg:this.emailOrg,
                    personPhone:this.personPhone,
                    emailNum:this.emailNum,
                    emailCity:this.emailCity[0],
                    emailContry:this.emailContry[0],
                    emailLocationPc:this.emailLocationPc[0],
                    emailIsOk:this.emailIsOk[0],
                    emailReason:this.emailReason,
                    remark:this.remark,
                    protectTime:this.protectTime,
                    netOmOrg:this.netOmOrg,
                    netOmOrgSecret:this.netOmOrgSecret,
                    server:this.server,
                    cpu:this.cpu,
                    operatingSystem:this.operatingSystem,
                    database:this.database,
                    middleware:this.middleware,
                    fileUrl:this.fileUrl,
                    emailFile:this.emailFile,
                }
            }
            getInfoSave(params).then((result) => {
                if(result.result){
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.getList();
                }
            })

      }else if(this.id !=null){
        const params = {
                userId:store.getters.user_id.toString(),
                token:store.getters.token.toString(),
                data:{
                    id:this.id,
                    fillingOrg:this.fillingOrg,
                    fillingPerson:this.fillingPerson,
                    fillingTel:this.fillingTel,
                    netName:this.netName,
                    netIp:this.netIp,
                    netArrange:this.netArrange,
                    netWay:this.netWay,
                    isManage:this.isManage[0],
                    netOrg:this.netOrg,
                    personName:this.personName,
                    jobPost:this.jobPost,
                    telPhone:this.telPhone,
                    phone:this.phone,
                    isLoacalizationPc:this.isLoacalizationPc[0],
                    isOk:this.isOk[0],
                    reasonPc:this.reasonPc,
                    isLoacalization:this.isLoacalization[0],
                    isUsedOk:this.isUsedOk[0],
                    reasonLoac:this.reasonLoac,
                    emailIp:this.emailIp,
                    emailName:this.emailName,
                    emailIsManage:this.emailIsManage[0],
                    emailOrg:this.emailOrg,
                    personPhone:this.personPhone,
                    emailNum:this.emailNum,
                    emailCity:this.emailCity[0],
                    emailContry:this.emailContry[0],
                    emailLocationPc:this.emailLocationPc[0],
                    emailIsOk:this.emailIsOk[0],
                    emailReason:this.emailReason,
                    remark:this.remark,
                    protectTime:this.protectTime,
                    netOmOrg:this.netOmOrg,
                    netOmOrgSecret:this.netOmOrgSecret,
                    server:this.server,
                    cpu:this.cpu,
                    operatingSystem:this.operatingSystem,
                    database:this.database,
                    middleware:this.middleware,
                    fileUrl:this.fileUrl,
                    emailFile:this.emailFile,
                }
            }
            getInfoUpdate(params).then((result) => {
                if(result.result){
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.getList();
                }
            })
      }
    },
    isManageChange(value){
      if(value[0] === '0'){
        this.fileManageList = [];
        this.fileUrl= "";
      }
      if(this.isManage.length > 1) {
        this.isManage.splice(0,1)
      }
    },
    isLoacalizationPcChange(){
      if(this.isLoacalizationPc.length > 1) {
        this.isLoacalizationPc.splice(0,1)
      }
    },
    isOkChange(){
      if(this.isOk.length > 1) {
        this.isOk.splice(0,1)
      }
    },
    isLoacalizationChange(){
      if(this.isLoacalization.length > 1) {
        this.isLoacalization.splice(0,1)
      }
    },
    isUsedOkChange(){
      if(this.isUsedOk.length > 1) {
        this.isUsedOk.splice(0,1)
      }
    },
    handlEmaileManageChange(value){
      if(value[0] === '0'){
        this.fileEmailList = [];
        this.emailFile= "";
      }
      if(this.emailIsManage.length > 1) {
        this.emailIsManage.splice(0,1)
      }
    },
    emailCityChange(){
      if(this.emailCity.length > 1) {
        this.emailCity.splice(0,1)
      }
    },
    emailContryChange(){
      if(this.emailContry.length > 1) {
        this.emailContry.splice(0,1)
      }
    },
    emailLocationPcChange(){
      if(this.emailLocationPc.length > 1) {
        this.emailLocationPc.splice(0,1)
      }
    },
    emailIsOkChange(){
      if(this.emailIsOk.length > 1) {
        this.emailIsOk.splice(0,1)
      }
    },
    before_upload(file) {
        console.log(file,"filename");
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(fileType);
        // 判断文件名的类型，允许多种就判断多个
        if (fileType == 'pdf') {
            console.log(file);
        } else {
            this.$message({
                message: '文件类型必须为pdf格式',
                type: 'warning'
            });
            // 返回false 就不会执行上传操作了
            return false
        }
    },
    handlePreview(file) {//点击fileList获取里面的url，可以直接在里面进行点击打开
      window.open(file.url);
    },
    uploadSuccess(response, file, fileList){
      if (response.success) {
        this.fileUrl = response.url;
      }
    },
    handlePreviewEmail(file) {
        window.open(file.url);
    },
    uploadSuccessEmail(response, file, fileList){ 
      if (response.success) {
        this.emailFile = response.url;
      }
    },
    before_uploadEmail(file) {
        console.log(file,"filename");
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(fileType);
        // 判断文件名的类型，允许多种就判断多个
        if (fileType == 'pdf') {
            console.log(file);
        } else {
            this.$message({
                message: '文件类型必须为pdf格式',
                type: 'warning'
            });
            // 返回false 就不会执行上传操作了
            return false
        }
    },
    handleCheckClassType(value) {
      console.log(value, "value");
    },
  },
};
</script>
  
  <style scoped>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
}
.infohead{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0px 0px 20px 0px;
  font-family: SimHei;
}
.infohead p{
  font-size:16px;
}
.inputVal{
  border: none;
  border-bottom:1px solid #000;
  font-size:16px;
  font-family: SimSun;
  color:#000;
  margin-left:10px;
  text-align: center;
}
.inputCss{
  width: 200px; 
  text-align: left;
  border: none;
  font-size:16px;
  font-family: SimSun;
  border-bottom:1px solid #000;
}
>>>.el-input--small .el-input__inner{
  border: none;
  font-size:16px;
  font-family: SimSun;
  color:#000;
}
>>>textarea.el-textarea__inner{
  border: none;
  font-size:16px;
  font-family: SimSun;
  color:#000;
}
>>>.el-checkbox__label{
  font-size:16px;
}
.tableWarp {
  scrollbar-color: #46a6ff #409eff;
}
.myTable {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
  overflow-y: scroll;
  font-family: SimHei;
}
.myTable .bgtd{
  background:#B0E2FF !important;
}
.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  text-align: center;
  font-size: 16px;
  padding: 5px 10px;
}
.classyang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}
.flexStart{
  display: flex;
  align-items: center; 
  justify-content: flex-start; 
  margin-top: 5px;
}
</style>